<template>
  <div class="songs-cover">
    <div class="cover-top">
      <img :src="formatImageSize(picUrl, 140)" :alt="name">
      <div class="cover sprite_covor">
        <div class="info sprite_covor">
          <span>
            <i class="erji sprite_icon"></i>
            {{ formatPlayCount(playCount) }}
          </span>
          <i class="play sprite_icon"></i>
        </div>
      </div>
    </div>

    <div class="cover-bottom text-nowrap">
      <a-tooltip placement="bottom">
        <template #title>{{ name }}</template>
        <span>{{ name }}</span>
      </a-tooltip>    
    </div>

    <div class="cover-source text-nowrap">
      by {{ copywriter }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import { formatPlayCount, formatImageSize } from "@/utils/format-utils";

export default defineComponent({
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },

  setup(props) {
    
    return {
      ...props.item,
      formatPlayCount,
      formatImageSize
    }
  }
})
</script>

<style lang="less" scoped>
@import './index.less';
</style>
